'use client';

import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import { Button } from '../ui/button';

export default function Pagination({ next }: { next: number | null }) {
  const searchParams = useSearchParams();
  const page = searchParams.get('page') ?? 1;
  const pathname = usePathname();
  const { replace } = useRouter();

  const handlePageChange = (newPage: number) => {
    const search = new URLSearchParams(searchParams);
    search.set('page', String(newPage));
    replace(`${pathname}?${search.toString()}`);
  };

  return (
    <div className="flex justify-center gap-5 ">
      <Button
        variant="ghost"
        disabled={!page || Number(page) <= 1}
        onClick={() => handlePageChange(Number(page) - 1)}
      >
        <span className="i-ri-arrow-left-s-line text-lg" />
      </Button>
      <Button
        variant="ghost"
        disabled={!next}
        onClick={() => handlePageChange(Number(page) + 1)}
      >
        <span className="i-ri-arrow-right-s-line text-lg" />
      </Button>
    </div>
  );
}
